<template>
    <div class="Node">
        <div class="center" :style="centerStyle">
            <popover
                    v-for="(item, index) in items"
                    :key="index"
                    :item="item"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Popover from "./component/Popover.vue";
@Component({
    name: 'Node',
    components: {Popover}
})
export default class extends Vue {
    private items: any[] = [
        { id: 0, value: 0.1 },
        { id: 1, value: 0.01 },
        { id: 2, value: 0.15 },
        { id: 3, value: 0.1 },
        { id: 4, value: 0.05 },
        { id: 5, value: 0.2 },
        { id: 6, value: 0.5 },
    ];
    private get centerStyle(): string {
        let value = window.screen.height - 54;
        let style = 'height: ' + value + 'px';
        // return style;
        return ''
    }
    private created(): void {
        // document.getElementById('g-html').style.overflow = 'hidden';
    }
    private beforeDestroy(): void {
        // document.getElementById('g-html').style.overflow = 'auto'
    }
}
</script>

<style scoped lang="less">
.Node {
    & .center {
        width: 100%;
        margin: 0 auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("../../assets/bg.jpeg");
        background-size: cover;
    }
}
</style>
